<template>
  <div class="box-card">
   <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>数据统计范围 {{goneForm.startTime}}至{{goneForm.invalidTime}} 共<span style="color:#4B7EFE">{{goneForm.countDays}}天</span></span>
      </div>

      <div class="info">
        <div>活动概览</div>
        <div class="card">
          <card title="活动订单总流水" tips="活动期间本站产生的所有流水。" unit="元" :num="goneForm.totalOrderAmount" back='linear-gradient(225deg, #81A5FF 0%, #4B7EFE 100%)' :img="`${$ossUrl}market/effect-money.png`"/>
          <card title="活动订单新客流水" tips="活动期间本站新客产生的所有流水。" unit="元" :num="goneForm.newUserAmount" back='linear-gradient(225deg, #B7C5DC 0%, #8394B3 100%)' :img="`${$ossUrl}market/effect-money.png`"/>
          <card title="活动订单老客流水" tips="活动期间本站老客产生的所有流水。" unit="元" :num="goneForm.oldUserAmount" back='linear-gradient(225deg, #ECD39E 0%, #D6A75B 100%)' :img="`${$ossUrl}market/effect-money.png`"/>
          <card title="油站浏览次数" tips="活动期间共给您油站带来的曝光量。" unit="次" :num="goneForm.gasDetailNum" back='linear-gradient(225deg, #B3B2DA 0%, #7578B4 100%)' :img="`${$ossUrl}market/effect-check.png`"/>
        </div>
      </div>
    </el-card>

     <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>活动趋势</span>
      </div>
      <my-line chartId="myLine1" titleText="整体流水走势" :seriesData="gongPeopleRnder" :xData="xData"></my-line>
      <my-line chartId="myLine2" titleText="整体用户走势" :seriesData="gongAmountRnder" :xData="xData"></my-line>
    </el-card>

    <el-card class="box-card" v-if="!advice.hasEnd">
      <div slot="header" class="clearfix">
        <span>活动建议</span>
      </div>
      <div class="g-flex-sb advice">
        <div class="advice-item">
          <img v-if="advice.increaseAmount > 0" :src="`${$ossUrl}market/up.png`" alt="">
          <img v-if="advice.increaseAmount < 0" :src="`${$ossUrl}market/down.png`" alt="">
          <span>流水周同日对比：</span>
          <span class="num">{{ advice.display ? advice.increaseAmount : '--' }}</span>
          <span class="unit">元</span>
        </div>
        <div class="advice-item">
          <img v-if="advice.increaseUserNum > 0" :src="`${$ossUrl}market/up.png`" alt="">
          <img v-if="advice.increaseUserNum < 0" :src="`${$ossUrl}market/down.png`" alt="">
          <span>油站新客周同日对比：</span>
          <span class="num">{{ advice.display ? advice.increaseUserNum : '--' }}</span>
          <span class="unit">人次</span>
        </div>
        <div class="advice-wrap">
          <div class="title">建议：</div>
          <div>
            <span class="icon"></span>
            {{ advice.suggest }}
          </div>
        </div>
      </div>
    </el-card>
  </div>  
</template>
<script>
import card from './components/driverCard'
import MyLine from './echart/line'
import { specialPriceChart, activityDetail, activeAdvice } from '@/api/marketShop'
import dayjs from 'dayjs'
export default {  
  name: 'effectSpecialPrice',
  data () {
    return {
      goneForm: {},
      gongPeopleRnder: [], // 活动期结算金额
      gongAmountRnder: [], // 活动期交易订单
      xData: [], // 横坐标
      advice: {}
    }
  },
  components: {
    card,
    MyLine
  },
  methods: {
    // echarts数据
    async activeDataTrendApi (activeId) {
      try {
        const { result } = await specialPriceChart({ activeId })
        const xArray = [] // 横坐标
        const newUserAmount = [] // 新客流水
        const oldUserAmount = [] // 老客流水
        const totalAmount = [] // 订单总流水
        const newUserNum = [] // 老司机活动金额
        const oldUserNum = [] // 新司机活动金额
        const totalUserNum = []
        result.dailyDataTrendLst.forEach(item => {
          xArray.push(item.date)
          newUserAmount.push(item.newUserAmount)
          oldUserAmount.push(item.oldUserAmount)
          totalAmount.push(item.totalAmount)
          newUserNum.push(item.newUserNum)
          oldUserNum.push(item.oldUserNum)
          totalUserNum.push(item.totalUserNum)
        })
        const markAreaData = result.subActivityTimeList.map(item => {
          return [
            { xAxis: dayjs(item.startTime).format('YYYY-MM-DD') },
            { xAxis: dayjs(item.endTime).format('YYYY-MM-DD') }
          ]
        })
        this.xData = xArray
        this.gongPeopleRnder = [
          {
            name: '订单总流水',
            data: totalAmount,
            borderColor: '#FF4D4F',
            colorStops:['#FD9F9F','#FFFFFF'],
            markArea: {
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                      offset: 0, color: '#FFFFFF' // 0% 处的颜色
                  }, {
                      offset: 1, color: 'rgba(255,93,93,.5)' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              },
              data: markAreaData
            }
          },
          {
            name: '新客流水',
            data: newUserAmount,
            borderColor: '#2AD052',
            colorStops:['#00D639','#FFFFFF'],
          },
          {
            name: '老客流水',
            data: oldUserAmount,
            borderColor: '#4765F9',
            colorStops:['#A8B6FF','#FFFFFF']
          }
        ]
        this.gongAmountRnder = [
          {
            name: '用户总数',
            data: totalUserNum,
            borderColor: '#FF6F02',
            colorStops: ['#FFFABB', '#FFFFFF'],
            markArea: {
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                      offset: 0, color: '#FFFFFF' // 0% 处的颜色
                  }, {
                      offset: 1, color: 'rgba(255,168,93,.5)' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              },
              data: markAreaData
            }
          },
          {
            name: '新用户数',
            data: newUserNum,
            borderColor: '#3F6CFF',
            colorStops:['#00E0FF','#FFFFFF'],
          },
          {
            name: '老用户数',
            data: oldUserNum,
            borderColor: '#3ED596',
            colorStops:['#B9FFD5','#FFFFFF']
          }
        ]
      } catch (e) {
        console.log(e)
      }
    },
    // 活动效果字段接口
    async activityDetailApi (activeId) {
      try {
        const res = await activityDetail({ activeId })
        this.goneForm = res.result
      } catch (e) {
        console.log(e)
      }
    },
    // 活动建议接口
    async activeAdvice (activeId) {
      try {
        const { result } = await activeAdvice({ activeId })
        this.advice = result
      } catch (e) {
        console.log(e)
      }
    }
  },
  created () {
    const activeId = this.$route.query.activeId
    this.activeDataTrendApi(activeId)
    this.activityDetailApi(activeId)
    this.activeAdvice(activeId)
  }
}
</script>
<style lang="less" scoped>
@import url('./styles/common.less');
</style>